<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0px; margin:0px; font-family:"微软雅黑"}
ul li{list-style:none;}
a{text-decoration:none; color:white;}
#main{width:1200px; height:500px; margin:0 auto;}
#main ul li{float:left; width:100px; height:500px;}
#main li:nth-child(1){background:url(1.jpg) no-repeat center center;}
#main li:nth-child(2){background:url(2.jpg) no-repeat center center;}
#main li:nth-child(3){background:url(3.jpg) no-repeat center center;}
#main li:nth-child(4){background:url(4.jpg) no-repeat center center; width:800px;}
.box{width:100px; height:500px; background:#000; opacity:0.5}
.box .p1{font-size:14px; width:14px; padding:25px 20px 0 20px; float:left;}
.box .p2{font-size:14px; width:14px; padding-top:25px; float:left}
</style>
<script src="jquery-1.11.0.js"></script>
<script>
$(function(){
	$("#main ul li").hover(function(){
		$(this).stop().animate({'width':'800px'},500).siblings().stop().animate({'width':'100px'},500)
		})
	})
</script>
</head>

<body>
<div id="main">
	<ul>
    	<li>
        <a href="#">
        	<div class="box">
            	<p class="p1">天王盖地虎....</p>
            	<p class="p2">宝塔镇河妖....</p>
            </div>
         </a>   
        </li>
    	<li>
        <a href="#">
        	<div class="box">
            	<p class="p1">天王盖地虎....</p>
            	<p class="p2">宝塔镇河妖....</p>
            </div>
         </a>   
        </li>
    	<li>
        <a href="#">
        	<div class="box">
            	<p class="p1">天王盖地虎....</p>
            	<p class="p2">宝塔镇河妖....</p>
            </div>
         </a>   
        </li>
    	<li>
        <a href="#">
        	<div class="box">
            	<p class="p1">天王盖地虎....</p>
            	<p class="p2">宝塔镇河妖....</p>
            </div>
         </a>   
        </li>
    </ul>
</div>
</body>
</html>
